<template>

	<view class="">

		<image style="position: fixed; width: 100vw; height: 100vh;"
			src="https://boyaltd.oss-cn-hangzhou.aliyuncs.com/bj_liand.png" mode=""></image>

		<view style="position: relative; width:100%; bottom: 0; left: 0;">

			<view style="width: 100%; margin-top: 30rpx;">
				<!-- <view @tap="back" class="gui-icons back_icon">&#xe600;</view> -->
				<view class="tab" style="">
					<view v-for="(t,i) in tabs" class="tab_item" @tap="tab_change(i)"
						:class="i==tab_index?'tab_item_action':''">
						{{t.name}}
					</view>
				</view>
			</view>

			<view class="rush-record">
				<view class="record-list">
					<view class="record-list-content">
						<view class="gui-margin-top gui-padding gui-text-center gui-color-gray"
							v-if="recordList.length <= 0">
							暂无数据</view>
						<view v-if="recordList.length > 0" class="record-list-item" v-for="(item,index) in recordList"
							:key="index">
							<view class="list-item-top">
								<view class="title etc" :class="{'mark':(index == 0)}">
									{{item.throughtName ||''}}
									<!-- <view class="type">{{item.isCom == 2 ? '企业' : '平台'}}</view> -->
								</view>
								<view>{{item.score?'+'+item.score:''}}</view>
							</view>
							<view class="rush-info">
								<view class="gate-num">{{item.sequenceName}}</view>
								<view class="time">{{replaceTime(item.rushStartTime)}}</view>
								<view class="total">
									共{{(item.rightQuantity || 0) + (item.faultQuantity || 0) + (item.remainQues || 0)}}题
								</view>
								<view>答对{{item.rightQuantity || '0'}}题</view>
								<view class="rushStatus" :class="{'fail':(item.state != 1)}">
									{{item.state == 0 ? '未完成':item.state == 1 ? '闯关成功' : '闯关失败'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				this_index: 1,
				scrollLeft2: null,
				title: '',
				tabs: [],
				main_hight: 800,
				recordList: [],
				tab_index: 0,
				cgjl: [{
					id: 1,
					name: '闯关练兵'
				}, {
					id: 2,
					name: '课程闯关'
				}],
				ksjl: [{
					id: 1,
					name: '正式考试'
				}, {
					id: 2,
					name: '课程考试'
				}],

				cglb_index: 0,
				gxcg_index: 0

			}
		},
		onLoad(opt) {

			this.main_hight = uni.getWindowInfo().screenHeight * 2 - uni.getWindowInfo().statusBarHeight * 2;
			this.tabs = this.cgjl;
			this.cglb();

		},
		methods: {
			back() {
				uni.navigateBack();
			},
			replaceTime(time) {
				if (time) {
					return time.substring(0, 16);
				} else {
					return '';
				}
			},

			tab_change(i) {
				let self = this
				this.tab_index = i
				self.recordList = [];
				if (i == 0) {
					this.cglb_index = 0;
					this.cglb()
				} else {
					this.gxcg_index = 0;
					this.gccg();
				}

			},

			cglb() { //闯关练兵
				let self = this;
				this.$lg.Get("/API-RUSH/front/rushQuery/frontQueryRecord", {
					page: this.cglb_index,
					pageSize: 20,
					isCom: 1
				}, function(res) {
					console.log('闯关练兵res：', res);
					self.recordList = res.data.rows;
				}, err => {
					console.log('闯关练兵err: ', err);
				}, false, false)
			},

			gccg() { //课程闯关
				let self = this;
				// http: //app.lgwisdomunion/
				this.$lg.Get("/API-COURSE/front/courseInfo/frontQueryRecord", {
					page: this.gxcg_index,
					pageSize: 20,
					isCom: 1
				}, function(res) {
					console.log('课程闯关res：', res);
					self.recordList = res.data.rows;
				}, err => {
					console.log('课程闯关err: ', err);
				}, false, false)

			},
			zuo() {
				uni.navigateBack()
			},
			leixing(id) {
				this.this_index = id
			},
			search(data) {
				console.log("search", data);
				this.$emit('search', data.value);
			},
			scroll(e) {
				console.log('shuju: ', e)
				this.scrollLeft = e.detail.scrollLeft
			},
		}
	}
</script>

<style>
	/* page {
		width: 100vw;
		height: 100vh;
		background: url("https://app.lgwisdomunion/static/img/bj_liand.469cefe0.png") 100% 100% / 100% 100%;
		background-repeat:no-repeat;
	} */

	.tab {
		width: 100%;
		padding: 10rpx;
		display: flex;
		/* margin-left: 130rpx; */
		/* align-content: center; */
		justify-content: space-evenly;
	}

	.tab_item {
		padding: 16rpx 25rpx;
		border-radius: 16rpx;
		background-color: white;
		color: #666666;
		border: 1px solid #c6c6c6;
	}

	.tab_item_action {
		box-shadow: 5rpx 5rpx 8rpx #666666;
		border: 1px solid #F27A43;
		background-color: #F27A43;
		color: white;
		font-weight: bold;
	}

	.back_icon {
		color: #333333;
		width: 100rpx;
		font-size: 50rpx;
		text-align: center;
		font-weight: bold;
		display: flex;
		justify-items: center;
		align-items: center;
		justify-content: center;
	}

	.content {}

	.record-list {
		width: 100%;
		/* margin-top: 170rpx; */
	}

	.record-list-item {
		line-height: 50rpx;
		font-size: 36rpx;
		padding: 10rpx 0rpx;
		border-bottom: dotted 1rpx #efefef;
		margin-bottom: 10rpx;
	}

	.rush-info {
		font-size: 26rpx;
		color: #666666;
		display: flex;
		justify-content: space-between;
	}

	.rush-record {
		padding: 20rpx 30rpx;
	}

	.rushStatus {
		border: 1px solid #0e3494;
		color: #0e3494;
		border-radius: 20rpx;
		padding: 0rpx 10rpx;
	}

	.list-item-top {
		display: flex;
		justify-content: space-between;
	}
</style>